import React, { Component, Fragment, useState } from 'react';
import {Button, Layout,Badge , Dropdown , MessageBox , Message, Loading} from "element-react"
import {useNavigate} from 'react-router-dom'
import { setTimeout } from 'core-js';

function PrivateSet(props) {
    const navigate = useNavigate() ;
    const [fullscreen , setFullscreen] = useState(false)
    function changepassword(value) {
        props.setFullscreen()
        fetch("/device/alterpwd?newpwd="+value ,{
                method:"GET" 
            }).then(data => data.json())
            .then((result)=>{
                let msg = {
                    type: 'success',
                    message: '密码修改成功 '
                }
                if(result===1) {
                    msg.type = 'success'
                    msg.message = "密码修改成功"
                } else {
                    msg.type = 'error'
                    msg.message = "密码修改失败"
                }
                Message(msg)
                props.setFullscreen() 
            })
    }

    function changeSelfinfo(info) {
      
    }

    function userLogout() {
        navigate('/123', {})
    }

    // 修改信息
    function InfoComponent(prop) {
        return 
    }

    function handleCommand(command){  
        switch (command) {
            case "1":
                MessageBox.prompt('请输入新密码', "提示", {
                    inputType:"password"
                }).then(({ value }) => { 
                    changepassword(value)
                }).catch(() => {
                    Message({
                    type: 'info',
                    message: '取消输入'
                    });
                });
                break;
            case "2":
                // MessageBox.prompt('请输入新密码', "提示", {
                //     inputType:"password" , 
                // }).then(({ value }) => { 
                //     changeSelfinfo(value)
                // }).catch(() => {
                //     Message({
                //     type: 'info',
                //     message: '取消输入'
                //     });
                // });
                Message({
                    type: 'info',
                    message: '功能还未开发'
                    });
                break;
            case "3":
                MessageBox.confirm('确定退出系统？', "操作", {
                    type:"warning"
                }).then(({ value }) => { 
                   userLogout()
                }).catch(() => {
                    Message({
                    type: 'info',
                    message: '取消'
                    });
                });
                break;
            default:
                break;
        }



    }

    return (
        <Dropdown trigger='hover' hideOnClick={false} onCommand={handleCommand} menuAlign='' menu={(
            <Dropdown.Menu>
            <Dropdown.Item command='1'>修改密码</Dropdown.Item>
            <Dropdown.Item command='2'>修改信息</Dropdown.Item>
            <Dropdown.Item command='3'>退出登陆</Dropdown.Item>
            </Dropdown.Menu>
        )}>       
            <div>
                <img src={props.avater_url} width={"36px"} alt="" />
            </div>
        </Dropdown>
    );
}



export default class Topbar extends Component {
    state = {
        username: "fulong",
        avater_url:"http://47.107.98.174:8080/react/img/avater/boy-1.png",
        msg:3 ,
        fullscreen : false
    }
    //通过redux获取用户信息等
    componentDidMount() {
        //console.log("头像， 昵称，消息")
    }
    setFullscreen = ()=>{
        this.setState({fullscreen:!this.state.fullscreen})
    }


    render() {
        return (
            <Fragment>
                  <Layout.Row type='flex' align='middle' justify='center'>
                    <Layout.Col offset={1} span={17}>
                        <div>
                           <i className='el-icon-menu'></i>
                        </div>
                    </Layout.Col>
                    <Layout.Col span={2} style={{textAlign:"center",fontSize:"20px"}}>
                        {this.state.username}
                    </Layout.Col>

                    <Layout.Col span={2} style={{textAlign:"center"}}>
                        <PrivateSet avater_url = {this.state.avater_url} setFullscreen = {this.setFullscreen}/>
                    </Layout.Col>

                    <Layout.Col span={2} style={{textAlign:"center"}}>
                    <Badge value={2}>
                        <Button  type='primary'><i style={{padding:"0"}} className='el-icon-message'></i></Button>
                    </Badge>
                        
                    </Layout.Col>
                  </Layout.Row>
                  <hr/>
                  <div>{this.state.fullscreen&&<Loading fullscreen={true}/>}</div>
            </Fragment>
        )
    }
}
